<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
    <!--<meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <link th:href="@{/lib/bootstrap/css/bootstrap.min.css}" type="text/css" rel="stylesheet"></link>
    <link th:href="@{/lib/materialdesignicons/materialdesignicons.min.css}" rel="stylesheet">
    <link th:href="@{/css/style.min.css}" type="text/css" rel="stylesheet"></link>&lt;!&ndash; 主css &ndash;&gt;-->
    <th:block th:replace="headfoot/head::head_common"></th:block>
</head>

<body>
<div class="container-fluid p-t-15">

    <div class="row">
        <div class="col-sm-6 col-md-3">
            <div class="card bg-primary">
                <div class="card-body clearfix">
                    <div class="pull-right">
                        <p class="h6 text-white m-t-0">学生总数</p>
                        <p class="h3 text-white m-b-0 fa-1-5x">[[${survey.studentNumber}]]人</p>
                    </div>
                    <div class="pull-left"><span class="img-avatar img-avatar-48 bg-translucent"><i
                            class="mdi mdi-account-multiple fa-1-5x"></i></span></div>
                </div>
            </div>
        </div>

        <div class="col-sm-6 col-md-3">
            <div class="card bg-danger">
                <div class="card-body clearfix">
                    <div class="pull-right">
                        <p class="h6 text-white m-t-0">院系总数</p>
                        <p class="h3 text-white m-b-0 fa-1-5x">[[${survey.facultyNumber}]]个</p>
                    </div>
                    <div class="pull-left"><span class="img-avatar img-avatar-48 bg-translucent"><i
                            class="mdi mdi-school fa-1-5x"></i></span></div>
                </div>
            </div>
        </div>

        <div class="col-sm-6 col-md-3">
            <div class="card bg-success">
                <div class="card-body clearfix">
                    <div class="pull-right">
                        <p class="h6 text-white m-t-0">专业总数</p>
                        <p class="h3 text-white m-b-0 fa-1-5x">[[${survey.majorNumber}]]个</p>
                    </div>
                    <div class="pull-left"><span class="img-avatar img-avatar-48 bg-translucent"><i
                            class="mdi mdi-unity fa-1-5x"></i></span></div>
                </div>
            </div>
        </div>

        <div class="col-sm-6 col-md-3">
            <div class="card bg-purple">
                <div class="card-body clearfix">
                    <div class="pull-right">
                        <p class="h6 text-white m-t-0">班级总数</p>
                        <p class="h3 text-white m-b-0 fa-1-5x">[[${survey.classesNumber}]]个</p>
                    </div>
                    <div class="pull-left"><span class="img-avatar img-avatar-48 bg-translucent"><i
                            class="mdi mdi-home fa-1-5x"></i></span></div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">

        <div class="col-md-6">
            <div class="card statistics-score">
                <div class="card-header">
                    <h4>学生成绩统计</h4>

                </div>
                <div class="card-body">
                    <div class="kj-list-queryFrom-container">
                        <div class="kj-list-queryFrom-item">
                            <div class="form-group col-sm-12">


                                <label class="col-sm-1 control-label kj-list-query-label text-info"
                                       title="课程">课程</label>
                                <div class="col-sm-4">
                                    <select class="form-control input-sm" id="course">
                                        <option th:each="course:${courses}" th:value="${course.name}">
                                            [[${course.name}]]
                                        </option>

                                    </select>
                                </div>
                                <label class="col-sm-1 control-label kj-list-query-label text-info"
                                       title="学期">学期</label>
                                <div class="col-sm-4">
                                    <select class="form-control input-sm" id="term"  data-value="2020-01" >
                                        <option th:each="term:${terms}" th:value="${term.value}">[[${term.text}]]
                                        </option>
                                    </select>
                                </div>

                                <div class="col-sm-2 kj-list-query-btn-container">
                                    <button  type="button" class="btn btn-sm btn-default kj-btn-query" onclick="scoreBar();"  >
                                        <i class="iconfont icon-chaxun"></i> 统计
                                    </button>
                                </div>
                            </div>

                        </div>

                    </div>

                    <canvas class="js-chartjs-lines"></canvas>
                </div>
            </div>
        </div>


        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h4>班级人数统计</h4>
                </div>
                <div class="card-body">
                    <canvas class="js-chartjs-bars"></canvas>
                </div>
            </div>
        </div>

    </div>

    <div class="row">

    </div>

    <div class="row">

        <div class="col-lg-12">
            <div class="card">
                <div class="card-header">
                    <h4>项目信息</h4>
                </div>
                <div class="card-body">
                </div>
            </div>
        </div>

    </div>

</div>

<th:block th:replace="headfoot/foot::list_foot"></th:block>

<!--图表插件-->
<script th:src="@{/lib/js/Chart.min.js}"></script>
<script type="text/javascript">

    var $dashChartBarsCnt = jQuery('.js-chartjs-bars')[0].getContext('2d'),
        $dashChartLinesCnt = jQuery('.js-chartjs-lines')[0].getContext('2d');
    var char1 =  new Chart($dashChartBarsCnt, {
        type: 'bar',
        data: {}
    });
    var char2 = new Chart($dashChartLinesCnt, {
        type: 'bar',
        data: {}
    });
    function scoreBar() {
        var courseName = $("#course").val();
        var term = $("#term").val();
        if (!courseName || !term) return;
        var data = {courseName: courseName, term: term};
        $request.post("/statistics/score", {data: data}, function (result) {
            if (result.code === 0) {
                if(result.data.labels.length === 0) {
                    $.alert(term +"学期没有开设课程：" + courseName, "tips");
                    return;
                }
                var $dashChartBarsData = {
                    labels: result.data.labels,
                    datasets: [
                        {
                            label: "平均分",
                            borderWidth: 1,
                            borderColor: 'rgba(0, 0, 0, 0)',
                            backgroundColor: 'rgba(247,220,111,0.667)',
                            hoverBackgroundColor: "rgba(51, 202, 185, 0.7)",
                            hoverBorderColor: "rgba(0, 0, 0, 0)",
                            data: result.data.datasets.avgScore
                        },
                        {
                            label: "最高分",
                            borderWidth: 2,
                            borderColor: 'rgba(0, 0, 0, 0)',
                            backgroundColor: 'rgba(95,174,227,1.000)',
                            hoverBackgroundColor: "rgba(51, 202, 185, 0.7)",
                            hoverBorderColor: "rgba(0, 0, 0, 0)",
                            data: result.data.datasets.maxScore
                        }
                        ,
                        {
                            label: "最低分",
                            borderWidth: 3,
                            borderColor: 'rgba(0, 0, 0, 0)',
                            backgroundColor: 'rgba(241,148,138,0.500)',
                            hoverBackgroundColor: "rgba(51, 202, 185, 0.7)",
                            hoverBorderColor: "rgba(0, 0, 0, 0)",
                            data: result.data.datasets.minScore
                        }
                    ]
                };
                char2.data = $dashChartBarsData;
                char2.update();
            }
        });

    }



    $(document).ready(function(e) {
        $(".statistics-score button").trigger("click");
        //班级人数图表
        $request.post("/statistics/classesNum", {}, function (result) {
            if (result.code == 0) {
                var $dashChartBarsData = {
                    labels: result.data.labels,
                    datasets: [
                        {
                            label: "班级人数统计",
                            borderWidth: 1,
                            borderColor: 'rgba(0, 0, 0, 0)',
                            backgroundColor: 'rgba(51, 202, 185, 0.5)',
                            hoverBackgroundColor: "rgba(51, 202, 185, 0.7)",
                            hoverBorderColor: "rgba(0, 0, 0, 0)",
                            data: result.data.datasets.studentNumber
                        }
                    ]
                };

                new Chart($dashChartBarsCnt, {
                    type: 'bar',
                    data: $dashChartBarsData
                });
            }
        });


    });
</script>
</body>
</html>
